<template>
    {{ str }}
    <input type="text" v-model="str">
    {{ num }}
    <button @click="handleAdd">点击</button>
</template>

<script>
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    setup () {
        // ref是组合式app的一个方法，作用是定义一个响应式数据
        let str = ref("孙悟空")
        let num = ref(10)
        let handleAdd = () => {
            console.log(num.value)
            // 被ref包裹住的数据，取赋值的时候，必须加上value，变量.value
            num.value++
            // unref可以直接提取value值
            let val = unref(str)
            console.log(val,"val")
        }
        return {
            str,
            num,
            handleAdd 
        }
    }
})
</script>

<style lang="scss" scoped>

</style>